<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品添加</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eff2f5;
            overflow: hidden;
        }

        .theme {
            width: 88%;
            float: right;
        }

        .top {
            height: 50px;
            background-color: white;
            box-shadow: 4px 4px 4px #ccc;
            display: flex;
            align-items: center;
        }


        .tab {
            width: 12%;
            height: 100%;
            background-color: #304156;
            position: fixed;
            top: 0;
        }

        .user {
            height: 60px;
            background-color: #1d324b;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .kuai {
            height: 60px;
            color: #bfcbd9;
            display: flex;
            align-items: center;
            padding-left: 20px;
            cursor: pointer;
            /* 设置kuai里面的文本不可选中 */
            user-select: none;
        }

        .kuai:hover {
            background-color: #263445;
        }

        #sonLayout {
            width: 96%;
            margin: auto;

        }

        .table{
            margin-top: 20px;
        }

        .data td{
            border: 1px solid #ccc;
            height: 50px;
        }

        #preview{
            width: 50px;
            height: 50px;
        }
    </style>


</head>

<body>

    <div id="app">
        <div class="tab">

            <div class="user">
                admin
            </div>
            <a href="/">
            <div id="list" class="kuai">
                商品列表
            </div>
        </a>
            <a href="addTo">
            <div id="tianija" class="kuai" style="color: #008ae6;">
                商品添加
            </div>
        </a>

        </div>


        <div class="theme">

            <div class="top"></div>


            <div id="sonLayout">

                <table class="table" style="width: 100%;border: 1px solid #ccc;">


                        <tr class="data"> 
                            <td>商品名称:<input type="text" id="shoppingName"></td>
                            <td>商品图片:<input type="file" id="photo" >
                            <img id="preview" src="" alt=""></td>
                            <td>商品价格:<input type="text" id="price"></td>
                            <td>商品库存:<input type="text" id="stock"></td>
                            <td>
                                <input type="text" id="shelfTime" style="display: none"><!-- 商品上架时间 -->
                                <button id="increase">提交</button>
                            </td> 
                            
                        </tr>


                   
                   


                </table>

            </div>


        </div>
    </div>
 </body>


<script>
 photo.onchange = function (event) {
                    // 获取文件的上传列表
                    let file = this.files[0]

                    //new FileReader()用来把二进制图像转成base64
                    let filereader = new FileReader()

                    //readAsDataURL() 是FileReader()之中的一个读取二进制文件并转化为base64的方法
                    filereader.readAsDataURL(file);  //读取了file并转化成base64

                    // 如果不给filereader设置onload而直接给preview赋值会因为filereader还没有值而报错,所以得等filereader有值了之后,也就是onload事件触发了才给preview赋值
                    filereader.onload = function (e) {
                        //this.result是filereader的base64
                        preview.src = this.result
                        preview.style.backgroundColor = "white"
                    }
                }

increase.onclick = function () {

var date = new Date();

var year = date.getFullYear();
var month = date.getMonth() + 1;    //js从0开始取 
var date1 = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var second = date.getSeconds();

shelfTime.value = `${year}-${month}-${date1} ${hour}:${minutes}:${second}`;

// 创建一个formData表单对象，此对象设置数据可以通过ajax的send发送给服务器
let formData = new FormData()

let file = photo.files[0]; // 文件二进制数据

// 追加数据
formData.append('shoppingName', shoppingName.value)
formData.append('img', file)
formData.append('price', price.value)
formData.append('stock', stock.value)
formData.append('shelfTime', shelfTime.value)

// 发送ajax -post请求
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    location.href = '/'
}
xhr.open('post', 'http://127.0.0.1:5000/zhen', true)

xhr.send(formData)

}

</script>

</html>